<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Author Jonas Ekström, Johan Sandström-->
<ui:composition   xmlns="http://www.w3.org/1999/xhtml"
                  xmlns:h="http://java.sun.com/jsf/html"
                  xmlns:ui="http://java.sun.com/jsf/facelets"
                  xmlns:p="http://primefaces.prime.com.tr/ui"
                  xmlns:f="http://java.sun.com/jsf/core"
                  template="WEB-INF/facelets/template.xhtml">

    <ui:define name="left">

        <h:form>
            <p:dataTable var="genre" value="#{shopBackingBean.genres}">  
                <f:facet name="header">  
                    Music  
                </f:facet>  
                <p:column>  
                    <f:facet name="header">  
                        <h:outputText value="Genre" />  
                    </f:facet>  

                    <p:commandLink value="#{genre}" update="shopForm" actionListener="#{shopBackingBean.setSelectedGenre()}">
<!--                        <p:graphicText value="#{genre}" fontName="Arial" fontSize="16" style="border: none" />-->
                        <f:param name="genre" value="#{genre}"/>
                    </p:commandLink>

                </p:column>  
            </p:dataTable>  
        </h:form>
        <p:panel header="Your shopping cart">
            <h:outputText value="You have #{shoppingCartModelBean.getCartCount()} articles in your shopping cart"></h:outputText>
            <p/>
            <h:outputText value="Total cost: #{shoppingCartModelBean.getTotal()} kr."></h:outputText>
        </p:panel>
    </ui:define>
    <ui:define name="content">
        <p:panel header="Products ">
            <p/>
            <h:form id="shopForm">  
                <p:dataTable var="prod" value="#{shopBackingBean.products}"
                             paginator="true" rows="7"
                             paginatorTemplate="{CurrentPageReport}  {FirstPageLink} 
                             {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}">

                    <h:outputText value="#{prod.genre}" />  

                    <p:column sortBy="#{prod.name}">  
                        <f:facet name="header">  
                            <h:outputText value="Album" />  
                        </f:facet>  
                        <h:outputText value="#{prod.name}" />  
                    </p:column>  

                    <p:column sortBy="#{prod.artist}">  
                        <f:facet name="header">  
                            <h:outputText value="Artist" />  
                        </f:facet>  
                        <h:outputText value="#{prod.artist}" />  
                    </p:column>  

                    <p:column sortBy="#{prod.genre}">  
                        <f:facet name="header">  
                            <h:outputText value="Genre" />  
                        </f:facet>  
                        <h:outputText value="#{prod.genre}" />  
                    </p:column>  
                    <p:column sortBy="#{prod.price}">  
                        <f:facet name="header">  
                            <h:outputText value="Cost" />  
                        </f:facet>  
                        <h:outputText value="#{prod.price} kr" />  
                    </p:column> 
                    <p:column>  
                        <p:commandButton value="Buy" update="@form" actionListener="#{shopControllerBean.buyProduct(prod)}" action="buyProduct"/>
                    </p:column>  
                </p:dataTable>  
            </h:form>  
        </p:panel>
    </ui:define>


</ui:composition>
